<template>
  <div class="container">
    <div class="banner">
      <router-view></router-view>
    </div>
    <div class="myIframe" v-if="agrShow">
      <div class="ico">
        <img src="../../../static/img/login/btn_jiam_close.png" @click="shut" alt="">
      </div>
      <agreement :src="isUrl" :tit="tit"></agreement>
    </div>
  </div>
</template>
<script>
import agreement from '../../components/agreement'
export default {
  data: () => {
    return {
      agrShow: false,
      isUrl: '',
      tit: ''
    }
  },
  components: {
    agreement
  },
  created: function () {
    let _this = this
    this.$root.$on('sendUrl', function (url, tit) {
      _this.isUrl = url
      _this.tit = tit
      _this.agrShow = true
    })
    window.scrollTo(0, 0)
  },
  methods: {
    shut: function () {
      this.isUrl = ''
      this.tit = ''
      this.agrShow = false
    }
  }
}
</script>
<style lang="scss" scoped>
.container{
  width: 100%;
  background: url('../../../static/img/login/log_banner.png') no-repeat 0 0/cover;
  height: 600px;
  .myIframe{
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.5);
    position: fixed;
    z-index: 1001;
    top: 0;
    .ico{
      width: 1200px;
      height: 20px;
      position: absolute;
      top: 95px;
      left: 0;
      right: 0;
      margin: 0 auto;
      z-index: 1002;
      img{
        width: 14px;
        cursor: pointer;
        margin-left: 770px;
      }
    }
  }
  .banner{
    width: 1200px;
    margin: 0 auto;
  }
}
</style>
